/**
 * Created by tdzl2003 on 8/24/16.
 */
import React from 'react';
import { Button, InputNumber, Popconfirm } from 'antd';
import {get, put, $delete} from '../../logics/rpc';
import ObjectTable from '../../components/ObjectTable';
import {formatDate} from "../../utils/formatDate";
import Editable from '../../components/Editable';
import AddGoodModal from './AddGoodModal';

function editGood({id}, field, value) {
  return put(`/admin/good/${id}/edit/${field}`, {value});
}

function editableColumn(title, key, {format, ...props} ={}) {
  return {
    title,
    key,
    render: good => (
      <Editable
        value={format?format(good[key], good):good[key]}
        onEnter={value => editGood(good, key, value)}
        {...props}
      />
    ),
  }
}

export default class List extends React.Component{
  state={
    addGoodModalVisible: false,
  };
  fetchData = (params) => get('/admin/good/list', params);
  columns = [{
    title: 'ID',
    dataIndex: 'id',
    width: 60,
  }, {
    title: '封面',
    key: 'cover',
    render: good => (
      good.coverUrl && <a href={good.coverUrl} target="blank"><img src={good.coverUrl40} /></a>
    ),
  }, editableColumn('名称', 'name'),
    editableColumn('介绍', 'content'),
    editableColumn('价格', 'price', {
      format: v=>v.toFixed(2),
    }),
    editableColumn('用户提成', 'extracts', {
      format: (value, good) => value ? value : Math.round(good.price / 10),
    }),
    editableColumn('属性', 'property'),
    {
      title: '查看次数',
      render: ()=>'-',
    }, {
      title: '领取次数',
      dataIndex: 'advertiseCount',
    }, {
      title: '创作次数',
      render: ()=>'-',
    }, {
      title: '售出次数',
      dataIndex: 'soldout',
    }, {
      title: '上架时间',
      render: good =>(
        formatDate(new Date(good.createdAt))
      ),
    }, {
      title: '',
      render: (good) => (
        <div>
          <Popconfirm placement="topRight" title={`确认删除商品${good.name}吗？`} onConfirm={async ()=>{
        await $delete(`/admin/good/${good.id}`);
        this.refs.table.removeItem(good);
      }}>
            <Button size="small">删除</Button>
          </Popconfirm>
        </div>
      ),
    }];
  showAddGood = () =>{
    this.setState({
      addGoodModalVisible: true,
    });
  };
  dismissAddGood = () => {
    this.setState({
      addGoodModalVisible: false,
    });
  }
  renderHeader = () => {
    return (
      <div>
        <Button onClick={this.showAddGood}>添加商品信息</Button>
      </div>
    );
  };
  onGoodAdded = () => {
    this.refs.table.refresh();
  };
  render() {
    const {addGoodModalVisible} = this.state;
    return (
      <div>
      <ObjectTable
        ref="table"
        expandedRowRender={editableColumn('描述', 'description', {type:'textarea', autosize:true}).render}
        columns={this.columns}
        fetchData={this.fetchData}
        title={this.renderHeader}
      />
      <AddGoodModal
        visible ={addGoodModalVisible}
        dismiss ={this.dismissAddGood}
        onAdded ={this.onGoodAdded}
      />
      </div>
    );
  }
}
